import { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import store from '@/store'
import { getWxApi } from '_utils'
import './index.scss'

function getSystemInfo() {
  // h5 环境下 忽略 navbar
  const systemInfo = Object.assign(getWxApi('getDeviceInfo'), getWxApi('getWindowInfo')) || {
    model: '',
    system: '',
    platform: '',
    statusBarHeight: 0
  }
  const isWinPc = ['windows', 'mac'].includes(systemInfo.platform)
  const ios = !!((systemInfo.system || '').toLowerCase().search('ios') + 1)
  let rect
  try {
    rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null
    if (rect === null) {
      // eslint-disable-next-line no-throw-literal
      throw 'getMenuButtonBoundingClientRect error'
    }
    // 取值为 0 的情况， width 不为 0 top 为 0
    if (!rect?.width || !rect?.top || !rect?.left || !rect?.height) {
      // eslint-disable-next-line no-throw-literal
      throw 'getMenuButtonBoundingClientRect error'
    }
    rect.width = 96
  } catch (error) {
    let gap = '' // 胶囊按钮上下间距 使导航内容居中
    let width = 96 // 胶囊的宽度
    if (systemInfo.platform === 'android') {
      gap = 8
      width = 96
    } else if (systemInfo.platform === 'devtools') {
      if (ios) {
        gap = 5.5 // 开发工具中ios手机
      } else {
        gap = 7.5 // 开发工具中android和其他手机
      }
    } else {
      gap = 4
      width = 88
    }
    if (!systemInfo.statusBarHeight) {
      // 开启wifi的情况下修复statusBarHeight值获取不到
      systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20
    }
    rect = {
      // 获取不到胶囊信息就自定义重置一个
      bottom: systemInfo.statusBarHeight + gap + 32,
      height: 32,
      left: systemInfo.windowWidth - width - 10,
      right: systemInfo.windowWidth - 10,
      top: systemInfo.statusBarHeight + gap,
      width
    }
    // console.log('error', error)
    // console.log('rect', rect)
  }
  let navBarHeight = ''
  if (!systemInfo.statusBarHeight) {
    // 开启wifi和打电话下
    systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20
    navBarHeight = (function () {
      const gap = rect?.top - systemInfo.statusBarHeight
      return 2 * gap + rect?.height
    })()

    systemInfo.statusBarHeight = 0
    systemInfo.navBarExtendHeight = 0 // 下方扩展4像素高度 防止下方边距太小
  } else {
    navBarHeight = (function () {
      const gap = rect?.top - systemInfo.statusBarHeight
      return systemInfo.statusBarHeight + 2 * gap + rect?.height
    })()
    if (ios) {
      systemInfo.navBarExtendHeight = 4 // 下方扩展4像素高度 防止下方边距太小
    } else {
      systemInfo.navBarExtendHeight = 0
    }
  }

  systemInfo.navBarHeight = isWinPc ? 72 : navBarHeight // 导航栏高度不包括statusBarHeight
  systemInfo.capsulePosition = rect // 右上角胶囊按钮信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前发现在大多机型都是固定值 为防止不一样所以会使用动态值来计算nav元素大小
  systemInfo.ios = ios // 是否ios
  // Taro.globalSystemInfo = systemInfo //将信息保存到全局变量中,后边再用就不用重新异步获取了
  return systemInfo
}

class Navigation extends Component {
  constructor(props) {
    super(props)
    const _configStyle = this.setStyle(this.$globalSystemInfo)
    this.props.setHeightFun && this.props.setHeightFun(_configStyle.navBarHeight + _configStyle.navBarExtendHeight)
    this.state = {
      configStyle: _configStyle
    }
  }

  static options = {
    multipleSlots: true,
    addGlobalClass: true
  }

  componentDidShow() {
    // console.log(this.state.configStyle, 890)
    if (this.globalSystemInfo.ios) {
      this.$globalSystemInfo = getSystemInfo()
      this.setState({
        configStyle: this.setStyle(this.$globalSystemInfo)
      })
    }
  }

  $globalSystemInfo = getSystemInfo()

  handleBackClick() {
    if (this.props.onBack) {
      this.props.onBack()
    } else {
      const pages = Taro.getCurrentPages()
      if (pages.length >= 2) {
        Taro.navigateBack({
          delta: this.props.delta
        })
      } else {
        Taro.redirectTo({
          url: '/pages/home/index'
          // url: '/pages/classAssistant/home/index'
        })
      }
    }
  }

  handleGoHomeClick() {
    this.props.onHome && this.props.onHome()
  }

  handleSearchClick() {
    this.props.onSearch && this.props.onSearch()
  }

  setStyle(systemInfo) {
    const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth } = systemInfo
    const { back, home, title, color } = this.props
    const rightDistance = windowWidth - capsulePosition.right // 胶囊按钮右侧到屏幕右侧的边距
    const leftWidth = windowWidth - capsulePosition.left // 胶囊按钮左侧到屏幕右侧的边距

    const navigationbarinnerStyle = [
      `color: ${color}`,
      `height:${navBarHeight + navBarExtendHeight}px`,
      `padding-top:${statusBarHeight}px`,
      `padding-right:${leftWidth}px`,
      `padding-bottom:${navBarExtendHeight}px`
    ].join(';')
    let navBarLeft = []
    if ((back && !home) || (!back && home)) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition?.height}px`,
        'margin-left:0px',
        `margin-right:${rightDistance}px`
      ].join(';')
    } else if ((back && home) || title) {
      navBarLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition?.height}px`,
        `margin-left:${rightDistance}px`
      ].join(';')
    } else {
      navBarLeft = ['width:auto', 'margin-left:0px'].join(';')
    }
    return {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    }
  }

  render() {
    const {
      navigationbarinnerStyle,
      navBarLeft,
      navBarHeight,
      capsulePosition,
      navBarExtendHeight,
      ios,
      rightDistance
    } = this.state.configStyle
    const {
      title,
      background,
      backgroundColorTop,
      back,
      home,
      searchBar,
      searchText,
      iconTheme,
      extClass,
      hasBackgroundColor
    } = this.props
    let navBarCenter = null
    if (title) {
      navBarCenter = <Text>{title}</Text>
    } else if (searchBar) {
      navBarCenter = (
        <View
          className='nav-bar-search'
          style={`height:${capsulePosition?.height}px;`}
          onClick={this.handleSearchClick.bind(this)}>
          <View className='nav-bar-search__icon' />
          <View className='nav-bar-search__input'>{searchText}</View>
        </View>
      )
    } else {
      navBarCenter = this.props.renderCenter || ''
    }
    this.props.setHeightFun && this.props.setHeightFun(navBarHeight + navBarExtendHeight)
    store.common.setNavigationHeight(navBarHeight + navBarExtendHeight)
    return (
      <View
        id='navi'
        className={`nav-bar ${ios ? 'ios' : 'android'} ${extClass}`}
        style={`background: ${hasBackgroundColor || backgroundColorTop || background};height:${
          navBarHeight + navBarExtendHeight
        }px;`}>
        <View
          className={`nav-bar__placeholder ${ios ? 'ios' : 'android'}`}
          style={`padding-top: ${navBarHeight + navBarExtendHeight}px;`}
        />
        <View
          className={`nav-bar__inner ${ios ? 'ios' : 'android'}`}
          style={`background:${background};${navigationbarinnerStyle};`}>
          <View className='nav-bar__left' style={navBarLeft}>
            {back && !home && (
              <View
                onClick={this.handleBackClick.bind(this)}
                className={`nav-bar__button nav-bar__btn_goback ${iconTheme}`}
              />
            )}
            {!back && home && (
              <View
                onClick={this.handleGoHomeClick.bind(this)}
                className={`nav-bar__button nav-bar__btn_gohome ${iconTheme}`}
              />
            )}
            {back && home && (
              <View className={`nav-bar__buttons ${ios ? 'ios' : 'android'}`}>
                <View
                  onClick={this.handleBackClick.bind(this)}
                  className={`nav-bar__button nav-bar__btn_goback ${iconTheme}`}
                />
                <View
                  onClick={this.handleGoHomeClick.bind(this)}
                  className={`nav-bar__button nav-bar__btn_gohome ${iconTheme}}`}
                />
              </View>
            )}
            {!back && !home && this.props.renderLeft}
          </View>
          <View className='nav-bar__center' style={`padding-left: ${rightDistance}px`}>
            {navBarCenter}
          </View>
          <View className='nav-bar__right' style={`margin-right: ${rightDistance}px`}>
            {this.props.renderRight}
          </View>
        </View>
      </View>
    )
  }
}

Navigation.defaultProps = {
  extClass: '',
  background: 'rgba(255,255,255,1)', // 导航栏背景
  color: '#000000',
  title: '',
  searchText: '点我搜索',
  searchBar: false,
  back: false,
  home: false,
  iconTheme: 'black',
  delta: 1,
  setHeightFun: () => {}, // 设置导航栏高度
  hasBackgroundColor: '' // 苹果手机下拉会显示出占位的块
}

export default Navigation
